<template>
  <div class="inner" v-loading.fullscreen.lock="loading">
    <PageTitle title="药师审核" />
    <div class="ibody" v-if="dataObj && dataObj.planId">
      <el-row :gutter="40">
        <el-col
          :xs="24"
          :sm="24"
          :md="
            dataObj && dataObj.prescriptions && dataObj.prescriptions.length > 0
              ? 12
              : 24
          "
        >
          <div class="ibody-left">
            <div class="data com-bg">
              <el-row>
                <el-col :span="4">
                  <span class="d-label bot-line">单号：</span>
                </el-col>
                <el-col :span="20">
                  <span class="d-value bot-line">{{ dataObj.planId }}</span>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="4">
                  <span class="d-label bot-line">性别：</span>
                </el-col>
                <el-col :span="20">
                  <span class="d-value bot-line">{{
                    dataObj.gender === 0 ? "女" : "男"
                  }}</span>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="4">
                  <span class="d-label bot-line">年龄：</span>
                </el-col>
                <el-col :span="20">
                  <span class="d-value bot-line">{{ dataObj.age }}</span>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="4">
                  <span class="d-label bot-line">诊断：</span>
                </el-col>
                <el-col :span="20">
                  <span class="d-value bot-line">{{
                    (dataObj.diagnoses && dataObj.diagnoses.join(",")) || "无"
                  }}</span>
                </el-col>
              </el-row>
              <el-row v-for="(item, index) in dataObj.drugs" :key="index">
                <el-col :span="4">
                  <span
                    :class="['d-label', index === 0 ? 'bot-line' : '']"
                    v-if="index === 0"
                    >药品：</span
                  >
                </el-col>
                <el-col :span="20">
                  <div class="d-value bot-line">
                    <span class="drug-name mr20">{{ item.drugName }}</span>
                    <span class="drug-guige mr20">{{ item.standard }}</span>
                    <span class="drug-amount">{{ item.amount }}盒</span>
                  </div>
                </el-col>
              </el-row>
            </div>
            <div class="audit com-bg">
              <el-row class="bot-border">
                <el-col :span="4">
                  <span class="d-label">审核</span>
                </el-col>
                <el-col :span="20">
                  <el-button
                    @click="auditFn(0)"
                    :type="approvalComment === 0 ? 'success' : ''"
                    size="large"
                    :icon="Select"
                    >通过</el-button
                  >
                  <el-button
                    @click="auditFn(1)"
                    :type="approvalComment === 1 ? 'danger' : ''"
                    size="large"
                    :icon="CloseBold"
                    >未通过</el-button
                  >
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="4">
                  <span class="d-label">原因</span>
                </el-col>
                <el-col :span="20">
                  <el-button
                    @click="chooseCause('与处方不匹配')"
                    :type="rejectReason === '与处方不匹配' ? 'primary' : ''"
                    size="large"
                    >与处方不匹配</el-button
                  >
                  <el-button
                    @click="chooseCause('购药量超过规定')"
                    :type="rejectReason === '购药量超过规定' ? 'primary' : ''"
                    size="large"
                    >购药量超过规定</el-button
                  >
                  <el-button
                    @click="chooseCause('药品与诊断不符')"
                    :type="rejectReason === '药品与诊断不符' ? 'primary' : ''"
                    size="large"
                    >药品与诊断不符</el-button
                  >
                  <el-button
                    @click="chooseCause('处方无效')"
                    :type="rejectReason === '处方无效' ? 'primary' : ''"
                    size="large"
                    >处方无效</el-button
                  >
                </el-col>
              </el-row>
              <el-row class="input-row">
                <el-col :span="4" />
                <el-col :span="20">
                  <el-input
                    class="col-text"
                    v-model="otherCauseValue"
                    placeholder="其他原因请点此输入"
                    type="textarea"
                    :row="3"
                  />
                </el-col>
              </el-row>
            </div>
          </div>
        </el-col>
        <el-col
          :xs="24"
          :sm="24"
          :md="12"
          v-if="
            dataObj && dataObj.prescriptions && dataObj.prescriptions.length > 0
          "
        >
          <div class="ibody-right">
            <div class="scripts" title="点击可查看">
              <el-image
                :src="
                  (dataObj.prescriptions &&
                    dataObj.prescriptions[curImgIndex]) ||
                  chufangPng
                "
                fit="scale-down"
                :preview-src-list="dataObj.prescriptions"
                ref="previewImg"
              />
              <el-icon
                class="zoom"
                size="36"
                @click="viewBigPicture"
                title="点击查看大图"
                ><ZoomIn
              /></el-icon>
            </div>
            <div class="img-list">
              <el-image
                v-for="(item, index) in dataObj.prescriptions"
                :src="item"
                :key="index"
                :class="[curImgIndex === index ? 'active' : '']"
                @click="changeImgIndex(index)"
              />
            </div>

            <el-image-viewer
              v-if="showImageViewer"
              :url-list="dataObj.prescriptions"
              @close="hideImageViewer"
            />

            <!-- <div class="tip mt20">
              <el-button type="danger" @click="viewBigPicture" size="large"
                >点击按钮查看大图</el-button
              >
            </div> -->
          </div>
        </el-col>
      </el-row>
      <div class="btn-group">
        <el-button @click="submit" type="primary" size="large">提交</el-button>
      </div>
    </div>
    <div v-else class="zwsj" />
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted } from "vue";
import chufangPng from "@/assets/img/chufang.png";
import { getEarlistPendingOrderApi, submitApproveApi } from "@/api/pharmacists";
import { ElMessage, ElImageViewer, ElMessageBox } from "element-plus";
import PageTitle from "@/components/PageTitle.vue";
import { useUserStoreHook } from "@/store/modules/user";
import { useRouter } from "vue-router";
import { ZoomIn, CloseBold, Select } from "@element-plus/icons-vue";
import { myDialog } from "@/components/myDialog";
const router = useRouter();
const userStore = useUserStoreHook();
const warehouseId = userStore.userInfo.warehouseId;
const userId = userStore.userInfo.user;
// 初始化一些数据
const loading = ref(true);
const dataObj = ref();

const approvalComment = ref<number>(-1);

const rejectReason = ref<string>();

const otherCauseValue = ref<string>();

const otherCauseList = reactive([]);

// 图片
const previewImg = ref();

const showImageViewer = ref(false);

const curImgIndex = ref(0);

async function getEarlistOrder() {
  dataObj.value = await getEarlistPendingOrderApi(warehouseId);

  loading.value = false;
}

function auditFn(value) {
  approvalComment.value = value;
  if (value === 0) {
    rejectReason.value = "";
  }
}

function chooseCause(value) {
  approvalComment.value = 1;
  rejectReason.value = value;
  otherCauseValue.value = "";
}

function addOtherCause() {
  if (otherCauseList.includes(otherCauseValue.value)) {
    ElMessage.error("已经添加过该原因了");
    return;
  } else {
    rejectReason.value = otherCauseValue.value;
    otherCauseList.push(otherCauseValue.value);
  }
}

function init() {
  loading.value = true;
  dataObj.value = {};
  approvalComment.value = -1;
  rejectReason.value = "";
  otherCauseValue.value = "";
  // otherCauseList.value = [];
  previewImg.value = "";
  showImageViewer.value = false;
  getEarlistOrder();
}

async function submit() {
  if (approvalComment.value < 0) {
    // ElMessageBox.alert("请选择是否审核通过", "提示");
    console.log("myDialog:", myDialog);
    myDialog.warning({
      message: "请选择审核结果“通过”或者“未通过”"
    });
    return;
  }

  await submitApproveApi(dataObj.value.planId, {
    approvalComment: approvalComment.value,
    userId,
    rejectReason: rejectReason.value || otherCauseValue.value
  });

  ElMessageBox.confirm("审核完成，是否继续审核下一条？", "提示", {
    confirmButtonText: "下一条",
    cancelButtonText: "回首页",
    type: "success"
  })
    .then(() => {
      init();
    })
    .catch(() => {
      router.push({ path: "/" });
    });
}

function viewBigPicture() {
  showImageViewer.value = true;
}

function hideImageViewer() {
  showImageViewer.value = false;
}

function changeImgIndex(index) {
  curImgIndex.value = index;
}

onMounted(async () => {
  await getEarlistOrder();
});
</script>
<style lang="scss" scoped>
@media screen and (max-width: 1300px) {
  .inner {
    padding-bottom: 40px;
  }
}
@media screen and (max-width: 1300px) {
  .inner {
    padding-bottom: 40px;
  }
  .audit {
    .el-button {
      &:nth-child(even) {
        margin-right: 0px !important;
      }
    }
  }
}
.inner {
  position: relative;
  .com-bg {
    padding: 10px 30px;
    background: white;
    border-radius: 10px;
  }
  .ibody {
    .ibody-left,
    .ibody-right {
      box-sizing: border-box;
      border-radius: 8px;
      margin-bottom: 20px;

      box-sizing: border-box;
    }
    .ibody-left {
      flex-shrink: 0;
      .data {
        height: 360px;
        overflow-y: auto;
        :deep(.el-row) {
          line-height: 50px;
          height: 50px;
        }
        :deep(.el-col) {
          text-align: left;
        }
        .d-label {
          color: #b5b5c3;
          font-size: 18px;
          font-weight: bold;
          font-family: 思源黑体;
          width: 100%;
          display: inline-block;
          text-align: left;
          word-break: keep-all;
          &.bot-line {
            border-bottom: 1px dashed #d8d8d8;
          }
        }
        .d-value {
          font-size: 18px;
          font-weight: normal;
          letter-spacing: 0em;
          color: #3f4254;
          width: 100%;
          display: inline-block;
          position: relative;
          height: 51px;
          overflow: hidden;
          &.bot-line {
            border-bottom: 1px dashed #d8d8d8;
          }
          .drug-amount {
            float: right;
            color: #b5b5c3;
            margin-right: 30px;
          }
        }
      }
      .audit {
        margin-top: 36px;

        .el-row {
          padding: 17px 0px;
          &.bot-border {
            border-bottom: 1px dashed #d8d8d8;
          }
          .d-label {
            color: #b5b5c3;
            font-size: 18px;
            font-weight: bold;
            font-family: 思源黑体;
            width: 100%;
            display: inline-block;
            text-align: left;
            word-break: keep-all;
            &.bot-line {
              border-bottom: 1px dashed #d8d8d8;
            }
          }
        }
        .el-button {
          width: 160px;
          height: 50px;
          border-radius: 4px;
          opacity: 1;
          background: #ffffff;
          border: 0.5px dashed #b5b5c3;
          margin-right: 44px;
          font-size: 18px;
          font-weight: normal;
          letter-spacing: 0em;
          color: #3f4254;
          margin-bottom: 17px;
          margin-left: 0px;
          // &:nth-child(even) {
          //   margin-right: 0px;
          // }
          &.el-button--success {
            border-bottom: 4px solid #50cd89;
            color: #50cd89;
            border-style: solid;
          }
          &.el-button--danger {
            border-style: solid;
            border-bottom: 4px solid #ff7f65;
            color: #ff7f65;
          }
          &.el-button--primary {
            border-style: solid;
            border-bottom: 4px solid #3689f5;
            color: #3689f5;
          }
        }
      }
      .input-row {
        margin-top: -34px;
      }
    }
    .ibody-right {
      padding: 30px;
      background: white;
      border-radius: 10px;
      box-sizing: border-box;
      .scripts {
        width: 100%;
        height: 575px;
        background: #f5f5f5;
        text-align: center;
        position: relative;

        .zoom {
          position: absolute;
          bottom: 30px;
          right: 30px;
        }

        .el-image {
          width: 100%;
          height: 100%;
        }
      }
      .img-list {
        margin-top: 30px;
        display: flex;
        justify-content: flex-start;
        overflow-x: auto;
        .el-image {
          width: 72px;
          height: 72px;
          flex-shrink: 0;
          margin-right: 30px;
          border: 2px solid #f5f5f5;
          &:last-child {
            margin-right: 0px;
          }
          &.active {
            border: 2px solid #50cd89;
          }
        }
      }
      .tip {
        width: 100%;
        text-align: center;
      }
    }
  }
  .btn-group {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    .el-button {
      width: 200px;
      height: 50px;
      line-height: 50px;
      font-size: 18px;
    }
  }
}
</style>
